<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<span id="chapterName" class="mui-title"></span>
			<a id="commandComics"><span class="mui-icon mui-icon-list" style="float:right"></span></a>

		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--<div class="title">
					这是webview模式选项卡中的第1个子页面
				</div>-->
				<ul id="picture" class="mui-table-view mui-table-view-chevron">
					<!--图片-->

				</ul>
				<ul class="mui-table-view mui-table-view-chevron">
					<!--评论-->
					<li id="hotCommand" class="mui-table-view-cell">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<h4 class="mui-ellipsis">人气热评 <span class="mui-icon mui-icon-forward"></span></h4>

							</div>

						</div>
					</li>

				</ul>
				<ul id="comment" class="mui-table-view mui-table-view-chevron">

				</ul>
			</div>
		</div>

		<script src="js/url.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>

		<script>
			/*
						 如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
						 * */

			$.noConflict();
			var chapterid;
			var comicsid;
			var comicsName;
			var chapterName;
			
			
			
			mui.plusReady(function() {
				chapterid = plus.webview.currentWebview().chapterid;
				comicsid = plus.webview.currentWebview().comicsid;
				comicsName = plus.webview.currentWebview().comicsName;
				chapterName = plus.webview.currentWebview().chapterName;
				document.getElementById('chapterName').innerText = chapterName;
				
				jQuery.ajax({
				url: serverip.ip+'/mycomics/addhistory',
				xhrFields: {
					withCredentials: true
				},
				data: {
					c_pid: chapterid,
					cid:comicsid,
					chapterName:chapterName
				}
				
			});
			
			
			jQuery.ajax({
				url: serverip.ip+'/showComics/chapterPicture',
				dataType: 'json',
				xhrFields: {
					withCredentials: true
				},
				data: {
					chapterid: chapterid
				},
				success: function(data) {
					
					var ul = document.getElementById('picture');
					ul.innerHTML=null;
					for(var i = 0; i < data.length; i++) {
						var li = document.createElement('li');
						li.classList.add('mui-table-view-cell');
						li.style.padding = 0;
						li.innerHTML = '<div class="mui-card" style="margin:0">' +
							'<div  >'+
							'<img style="width:100%;" src="'+ serverip.ip2+data[i].cid+'/' + data[i].pictureName +'"></div>' +
							'</div>';
						ul.appendChild(li);
					}
				}
			});
				
				
			
			document.getElementById('commandComics').addEventListener('tap', function() {
				mui.openWindow({
					
					url: 'commandComics.html',
					extras: {
						comicsid: comicsid
					}
				})
			})
			
			document.getElementById('hotCommand').addEventListener('tap',function(){
				mui.openWindow({
					url: 'I-comment.html',
					extras: {
						chapterid: chapterid,
						comicsName:comicsName,
						chapterName:chapterName
					}
				})
			});
			

			jQuery.ajax({
				url: serverip.ip+'/comment/select',
				dataType: 'json',
				xhrFields: {
					withCredentials: true
				},
				data: {
					chapterid: chapterid
				},
				success: function(data) {
					var ul = document.getElementById('comment');
					for(var i = 0; i < 3; i++) {
						var li = document.createElement('li');
						li.classList.add('mui-table-view-cell');

						li.innerHTML = '<div class="mui-table">' +
							'<div class="mui-table-cell mui-col-xs-12" >' +
							'<h5 class="mui-ellipsis">用户名  <span class="mui-h5">' + data[i].commentTime + '</span></h5>' +
							'<p > ' + data[i].commentContent + '</p>' +
							'</div>' +
							'</div>';
						ul.appendChild(li);
					}
				}
			});
			
			
			});
		</script>

		<script>
			mui.init({
				swipeBack: false,
				keyEventBind: {
					backbutton: false //关闭back按键监听
				},
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for(var i = cells.length, len = i + 20; i < len; i++) {
						/*var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<div class="mui-card" style="margin:0">'
						 +' <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/cbd.jpg)"></div>'
							+'</div>';
						table.appendChild(li);*/
					}

					/*jQuery(".mui-table-view-cell").bind("tap", function(){
	          alert(jQuery(this).find(".mui-card:first").text());
	         
	          jQuery.ajax({
                     type:'post',
		             url:serverip.ip+'/',
		               xhrFields:{
                      withCredentials: true
                      },
                     crossDomain: true,
		    success:function(data){
		      alert(data);
		    },
	       error: function(){
		     
		     alert("发送失败");
			}
				});
	   });*/

				}, 1000);
			}
		</script>
	</body>

</html>